<template>
  <div class="Lyric">
    <ul @mouseover="jingr" @mouseleave="chuq" v-show="this.$store.state.lyric">
      <li v-for="(item, index) in lyricText" :key="index">
        <div :class="[index % 2 == 0 ? 'left' : 'right']">
          <div class="diancheng"></div>
          <span border="0" style="cursor: pointer"> {{ item.text }}</span>
        </div>
      </li>
    </ul>
    <transition name="sss" mode="out-in">
      <div class="conten" v-show="show"></div>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Lyric",
  props: ["Lyrictexts"],

  watch: {
    Lyrictexts(Valu) {
      console.log(Valu);
      this.$nextTick(() => {
        this.lyricText = Valu;
        this.$forceUpdate();
      });
    },
  },
  data() {
    return {
      lyricText: [],
      show: true,
    };
  },
  mounted() {
    console.log("123456");
    setTimeout(() => {
      this.show = !this.show;
    });
  },
  methods: {
    jingr() {
      this.show = true;
    },
    // 鼠标移出
    chuq() {
      this.show = false;
    },
  },
};
</script>

<style lang="less" scoped>
.Lyric {
  width: 80vw;
  height: 8vh;
  //   background-color: aquamarine;
  position: fixed;
  z-index: 100;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, -50%);
  .conten {
    width: 900px;
    height: 100%;
    position: absolute;
    background-color: rgba(51, 51, 51, 0.281);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    transform: translate(-50%, -50%);
  }
  ul {
    width: 900px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 5px;
    margin: 0 auto;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    border-radius: 5px;
    transform: translate(-50%, -50%);
    li {
      // margin-bottom: 20px;
      // width: 100%;
      height: 100%;
      margin-right: 20px;
      margin-left: 20px;

      //  border: 1px solid #000;
      display: flex;
      //  justify-items: center;
      //  justify-content: center;
    }
  }
  .left {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    span {
      font-size: 35px;
      font-weight: 600;
      color: rgb(241, 0, 221);
      text-shadow: 5px 5px 3px rgb(176, 179, 180); /*添加字体文字的阴影*/
    }
  }
  .right {
    width: 100%;
    display: flex;
    flex-direction: row;
    // flex-direction:row-reverse;
    align-items: center;
    span {
      font-size: 35px;
      font-weight: 600;
      color: rgb(241, 0, 221);
      text-shadow: 5px 5px 3px rgb(176, 179, 180); /*添加字体文字的阴影*/
    }
  }
}
.diancheng {
  flex: 1;
  height: 100%;
}
</style>